<!-- 街道新闻 -->
<template>
  <div class="new-list" v-if="isAllLoad">
    <ul class="new-list-box" v-if="newData.length>0"  v-infinite-scroll="loadMore" :infinite-scroll-disabled="moreLoading" infinite-scroll-distance="150">
      <li class="single_new" v-for="item in newData" :keys="item.articleId" @click.stop="toApp('StreetNewsAct')">
        <div class="top">
          <i class="iconfont icon-dongtai"></i>
          <div class="title"><span>{{item.articleTitle}}</span></div>
          <div class="time">时间：{{item.releaseTime.replace("T"," ")}}</div>
        </div>
        <div class="bottom">
          <button @click.stop="toApp(item.articleId)">查看</button>
        </div>
      </li>
      <!--底部判断是加载图标还是提示“全部加载”-->
        <div class="more_loading" v-show="!queryLoading && !noData">
            <mt-spinner type="snake" color="#ccc" :size="20" v-show=" moreLoading && !allLoaded">加载中</mt-spinner>
            <span v-show="allLoaded">已全部加载</span>
        </div>
        <div class="exam_list_box exam_noData" v-if="noData && isAllLoad">
            <i class="iconfont icon-wushuju"></i>
            <span>暂无数据</span>
        </div>
    </ul>
    <div class="nocourse" v-else><i class="iconfont icon-zanwu"></i>
      <p>暂无数据</p>
    </div>
  </div>
</template>
<script>
import verify from '@/assets/js/verificationMixin'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'NewsList',
  mixins: [verify],
  data() {
    return {
      phone: this.$route.query.phone,
      isAllLoad: false,
      newData: [],
      //下拉加载和 暂时没有的搜索
      pageNum           : 0,
      queryLoading      : false,
      moreLoading       : false,
      allLoaded         : false,
      totalNum          : 0,
      pageSize          : 5,
      noData            : false,
    }
  },
  computed: {
    ...mapState(['userPhone']),
  },
  methods: {
    ...mapMutations([
      'toApp'
    ]),
    //下拉加载
    loadMore() {
        if (this.allLoaded) {
            this.moreLoading = true;
            return;
        }
        if (this.queryLoading) {
            return;
        }
        this.moreLoading = !this.queryLoading;
        this.pageNum++;
        this.getNewList();
    },
    //获取新闻列表
    getNewList() {
      let _self = this;
      let uri = 'newsmngajax/articleInfo!queryArticleInfoList.action'
      _self.$_get(uri, {
          'verifyStatus': '2',
          'articleType': '1',
          'userPhone': _self.phone,
          'page'         :_self.pageNum,
          'rows'         :_self.pageSize,
        })
        .then(function(res) {
          let data = res.BinHaiOAVO;
          if(_self.pageNum == 1){
              _self.newData = res.gridModel;
          }else{
               _self.newData = _self.newData.concat(res.gridModel);
          }
          if(_self.newData.length >= res.records ){
              _self.moreLoading = !_self.queryLoading;
              _self.allLoaded = true;
          }
          if(_self.pageNum==1 && _self.newData.length==0){
              _self.noData = true;
          }
          _self.isAllLoad = true;
        })
    },
    toDetails(id) {
      let _self = this;
      if (_self.isIos()) {
        let appName = 'taobao';
      } else {
        let appName = '';
      }
    },
    isIos() {
      let ua = navigator.userAgent.toLowerCase();
      if (/iphone|ipad|ipod/.test(ua)) {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    this.$_verifyConfig()
    this.getNewList();
    dd.ready(function(){
        dd.biz.navigation.setTitle({
            title: '新闻信息',//标题
            onSuccess : function(result) {},
            onFail : function() {}
        });
    })
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
.new-list {
  height: 100%;
  overflow-y: auto;
  background: #f4f4f4;
  padding-bottom: 80px;
  padding: 20px 20px;

  li.single_new {
    width: 100%;
    margin-bottom: 20px;
    border-radius: 16px;
    box-sizing: border-box;
    min-height: 127px;
    background: #fff;
    border: 1px solid #f4f4f4;
    /* no */
    /*padding-left:120px;*/
    padding-top: 30px;
    /*padding-bottom:30px;*/
    text-align: left;
    box-shadow: 0 0 10px #eee;

    i {
      position: absolute;
      height: 100%;
      width: 70px;
      height: 70px;
      text-align: left;
      top: 14px;
      left: 20px;
      line-height: 70px;
      text-align: center;
      background: #CC3333;
      color: #fff;
      font-size: 40px;
      border-radius: 50%;
      box-shadow: 0 0 10px #ddd;
    }

    div.title {
      min-height: 60px;
      line-height: 50px;
      padding: 10px 0;
      font-size: 32px;
      /* px */
      color: #333;
      font-weight: 600;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    div.time {
      min-height: 60px;
      line-height: 60px;
      font-size: 28px;
      /* px */
      color: #666;
    }

    div.bottom {
      height: 90px;
      border-top: 1px dashed #ddd;
      margin: 15px 30px 0;

      button {
        display: block;
        padding: 0 30px;
        height: 50px;
        background: #fff;
        float: right;
        border-radius: 30px;
        color: #CC3333;
        border: 1px solid #CC3333;
        /* no */
        margin: 20px 30px;
        outline: none;
      }
    }

    div.top {
      padding-left: 120px;
      padding-right: 20px;
      position: relative;
    }
  }

  .nocourse {
    margin-top: 200px;

    .iconfont {
      font-size: 180px;
      color: #999;
    }

    p {
      color: #999;
      font-size: 22px;
      line-height: 80px;
    }
  }
}

</style>
